<template>
    <div class="container">
        <el-card class="box-card" shadow="none" border="none">
            <div slot="header" class="clearfix">
                <el-page-header @back="goBack" :content="'所有' + title.substring(2, title.length)"></el-page-header>
            </div>
            <div class="enterprise_detail_content">
                <!-- 内容区域 -->
                <el-row :gutter="20">
                    <el-col :span="8" v-for="it in enterprises" :key="it.id">
                        <el-card :body-style="{ padding: '0px' }" style="margin: 0 0 10px 0"
                            @click.native="() => $router.push({ path: '/user/enterprise_detail', query: { id: it.id, title: title, user: user } })">
                            <!-- 记得修改链接 -->
                            <el-image :src="it.img" fit="cover" class="image">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <div style="padding: 14px;">
                                <h4>{{ it.name }}</h4>
                                <div class="senic_spot_info">
                                    {{ it.introduction }}
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

                <el-divider>没有啦，一滴都没有啦🥵</el-divider>
                <el-backtop target=".enterprise_detail_content">
                    <el-button type="primary" icon="el-icon-caret-top" circle></el-button></el-backtop>
            </div>

        </el-card>
    </div>
</template>

<script>

import Map from "@/components/reusable_components/map.vue";
import SvgIcon from './SvgIcon.vue';
export default {
    components: {
        Map,
        SvgIcon
    },

    data() {
        return {
            title: '',
            user: '',
            enterprises: []
        }
    },

    mounted() {
        this.title = this.$route.query.title
        this.user = this.$route.query.user
        this.get_all_enterprise()
    },

    methods: {
        // 返回上一页
        goBack() {
            this.$router.back()
        },

        async get_all_enterprise() {
            let url = ''
            switch (this.user) {
                case 'hot_scenic_spot':
                    url = '/findAllAttractions'
                    break;
                case 'hot_hotel':
                    url = '/findAllHotels'
                    break;
                case 'hot_travel_agency':
                    url = '/findAllAgency'
                    break;

                default:
                    break;
            }
            try {
                const res = await this.$http.get(url);
                this.enterprises = res.data.data
            } catch (error) {
                // console.log(error);
            }
        },

    }
}
</script>

<style lang="less" scoped>
.container {
    width: 61.8vw;
    min-width: 950px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);

    .enterprise_detail_content {
        height: 80vh;
        overflow: auto;

        -ms-overflow-style: none;
        /* IE 10+ */

        scrollbar-width: none;
        /* Firefox */
    }

    .enterprise_detail_content::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .image {
        width: 100%;
        max-height: 250px;

        display: block;
    }

    h4 {
        margin-top: 2px;
        margin-bottom: 10px;
    }

    .senic_spot_info {
        color: #99a9bf;
        font-size: 0.5em;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .time_sender {
            color: #99a9bf;
            font-size: 0.5em;
        }
    }

}
</style>